<script setup >
import DashboardChart from "./components/DashboardChart.vue";
import DashboardBarChart from "./components/DashboardBarChart.vue";
import FacilityDetail from "./components/FacilityDetail.vue";
import TopologyGraph from "../topology/components/TopologyGraph.vue";
import { ref, onMounted } from "vue";
//api
import { getIndex, getTop5 } from "@/api/index";
const tabs = ["拓扑图", "机房图"];
const active = ref(0);
//设备类别
const typeyAxisData = ref();
const typeData = ref();
//内存响应top5
const ncTop5yAxisData = ref();
const ncTop5Data = ref();
//cupTop5
const cpuTop5yAxisData = ref();
const cpuTopData = ref();
//获取列表
const getIndexList = async () => {
  const res = await getIndex();
  typeyAxisData.value = res?.data?.map((x) => x.GroupName);
  const onlineData = res?.data?.map((x) => x.OnlineDevices);
  const totalData = res?.data?.map((x) => x.TotalDevices);
  typeData.value = [
    { name: "在线数量", color: "#16CA46", data: onlineData },
    { name: "总数量", color: "#F0A400", data: totalData },
  ];
};
//获取top
const getTop5List = async () => {
  const res = await getTop5();
  //内存使用率
  ncTop5yAxisData.value = res.data["server.memory.used"].map((x) => x.host);
  const data = res.data["server.memory.used"].map((x) => x.value);
  ncTop5Data.value = [{ name: "使用率", color: "#16CA46", data }];
  //cup使用率
  cpuTop5yAxisData.value = res.data["server.cpu.utilization.avg"].map(
    (x) => x.host
  );
  const cpuData = res.data["server.cpu.utilization.avg"].map((x) => x.value);
  cpuTopData.value = [{ name: "使用率", color: "#16CA46", data: cpuData }];
};
onMounted(() => {
  getIndexList();
  getTop5List();
});
</script>

<template>
  <div class="dashboard">
    <header class="dashboard-header">
      <h1 class="title">优雅草星云物联网AI智控管理系统</h1>
      <div class="time">
        {{ new Date().toLocaleString().replaceAll("/", "-") }}
      </div>
    </header>

    <div class="dashboard-content">
      <div class="left-panel panel">
        <div class="panel-item">
          <div class="panel-head">
            <img src="@/assets/index/title.png" alt="" />
            <h2>设备类别</h2>
          </div>
          <div class="panel-chart">
            <DashboardBarChart
              :yAxisData="typeyAxisData"
              :series="typeData"
              legend-position="top"
              :is-stack="true"
            ></DashboardBarChart>
          </div>
        </div>
        <div class="panel-item">
          <div class="panel-head">
            <img src="@/assets/index/title.png" alt="" />
            <h2>平均响应Top5</h2>
          </div>
          <div class="panel-chart">
            <DashboardBarChart
              :yAxisData="typeyAxisData"
              :series="typeData"
              legend-position="top"
              :is-stack="true"
            ></DashboardBarChart>
          </div>
        </div>
      </div>
      <!--中间-->
      <div class="center-panel panel">
        <div class="panel-item">
          <div class="topology-tabs">
            <div
              class="tab"
              v-for="(item, index) in tabs"
              :key="index"
              :class="{ active: active == index }"
              @click="active = index"
            >
              {{ item }}
            </div>
          </div>
          <div class="topology-hr"></div>
          <div class="topology-chart">
            <TopologyGraph />
          </div>
        </div>
        <div class="panel-item">
          <div class="panel-head">
            <img src="@/assets/index/title.png" alt="" />
            <h2>告警趋势</h2>
          </div>
          <div class="panel-chart">
            <DashboardChart />
          </div>
        </div>
      </div>

      <div class="right-panel panel">
        <div class="panel-item">
          <div class="panel-head">
            <img src="@/assets/index/title.png" alt="" />
            <h2>核心设备情况</h2>
          </div>
          <DashboardBarChart
            :yAxisData="cpuTop5yAxisData"
            :series="cpuTopData"
          ></DashboardBarChart>
        </div>
        <div class="panel-item">
          <div class="panel-head">
            <img src="@/assets/index/title.png" alt="" />
            <h2>CPU TOP5</h2>
          </div>
          <DashboardBarChart
            :yAxisData="cpuTop5yAxisData"
            :series="cpuTopData"
          ></DashboardBarChart>
        </div>
        <div class="panel-item">
          <div class="panel-head">
            <img src="@/assets/index/title.png" alt="" />
            <h2>风扇状态</h2>
          </div>
          <DashboardBarChart
            :yAxisData="cpuTop5yAxisData"
            :series="cpuTopData"
          ></DashboardBarChart>
        </div>
        <div class="panel-item">
          <div class="panel-head">
            <img src="@/assets/index/title.png" alt="" />
            <h2>光功率TOP5</h2>
          </div>
          <DashboardBarChart
            :yAxisData="cpuTop5yAxisData"
            :series="cpuTopData"
          ></DashboardBarChart>
        </div>
      </div>
      <div class="right-panel panel">
        <div class="panel-item">
          <div class="panel-head">
            <img src="@/assets/index/title.png" alt="" />
            <h2>风扇状态</h2>
          </div>
          <DashboardBarChart
            :yAxisData="ncTop5yAxisData"
            :series="ncTop5Data"
          ></DashboardBarChart>
        </div>
        <div class="panel-item">
          <div class="panel-head">
            <img src="@/assets/index/title.png" alt="" />
            <h2>内存TOP5</h2>
          </div>
          <DashboardBarChart
            :yAxisData="ncTop5yAxisData"
            :series="ncTop5Data"
          ></DashboardBarChart>
        </div>
        <div class="panel-item">
          <div class="panel-head">
            <img src="@/assets/index/title.png" alt="" />
            <h2>接口量TOP5</h2>
          </div>
          <DashboardBarChart
            :yAxisData="cpuTop5yAxisData"
            :series="cpuTopData"
          ></DashboardBarChart>
        </div>
        <div class="panel-item">
          <div class="panel-head">
            <img src="@/assets/index/title.png" alt="" />
            <h2>丢包率TOP5</h2>
          </div>
          <DashboardBarChart
            :yAxisData="cpuTop5yAxisData"
            :series="cpuTopData"
          ></DashboardBarChart>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
.dashboard {
  background-color: #000b11;
  background-image: url("../../assets/index/bg.png");
  background-size: 100% 100%;
  // height: calc(100vh - 100px);
  border-radius: 4px 4px 4px 4px;
  position: relative;
  header {
    height: 63px;
    text-align: center;
    color: #fff;
    background-image: url("../../assets/index/titleBg.png");
    background-size: 100% 100%;
    position: relative;
    .time {
      position: absolute;
      right: 37px;
      top: 10px;
    }
    .title {
      line-height: 40px;
    }
  }

  &-content {
    display: grid;
    grid-template-columns: 400px 1fr 300px 300px;
    gap: 20px;
    padding: 20px;
    color: #fff;
  }
}
.panel {
  background: var(--panel-bg);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  gap: 20px;
  .panel-item {
    background: #0e1e41;
    flex: 1;
    .panel-head {
      height: 42px;
      background: linear-gradient(
        90deg,
        #2e5198 0%,
        #142c62 54%,
        rgba(34, 63, 127, 0) 100%
      );
      padding: 0 15px;
      display: flex;
      align-items: center;
      img {
        height: 25px;
        width: 25px;
      }
      h2 {
        font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
        font-weight: bold;
        font-size: 18px;
        color: #edf3ff;
        line-height: 26px;
        margin-left: 9px;
      }
    }
    .panel-chart {
      height: calc(100% - 42px);
    }
  }
  &.right-panel {
    .chart-container {
      height: 165px;
    }
  }
}

.device-list {
  list-style: none;
  padding: 0;
  margin: 0;

  .device-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    &:last-child {
      border-bottom: none;
    }

    .device-name {
      color: var(--text-color);
    }

    .device-value {
      color: var(--primary-color);
    }
  }
}

.status-cards {
  display: grid;
  gap: 20px;

  .status-card {
    background: rgba(0, 21, 41, 0.5);
    border-radius: 6px;
    padding: 15px;

    h3 {
      margin: 0 0 15px;
      font-size: 16px;
      color: var(--primary-color);
    }
  }
}

.progress-list {
  .progress-item {
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 0;
    }

    .progress-label {
      margin-bottom: 5px;
      font-size: 14px;
    }

    .progress-bar {
      height: 6px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 3px;
      overflow: hidden;

      .progress {
        height: 100%;
        background: var(--primary-color);
        transition: width 0.3s ease;
      }
    }
  }
}
.topology-hr {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    #7d9fe4 0%,
    #7394de 32%,
    rgba(34, 63, 127, 0) 100%
  );
  border-radius: 0px 0px 0px 0px;
}
.topology-chart {
  height: calc(100% - 55px);
}
.topology-tabs {
  display: flex;
  align-items: center;
  height: 45px;
  gap: 20px;
  margin-bottom: 10px;
  padding: 0 20px;
  .tab {
    color: #2e5198;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    background-size: 100%;
    background-image: url("../../assets/index/tab.png");
    cursor: pointer;
  }
  .tab.active {
    color: #fff;
  }
}
</style>